var Config = Ext.extend(Ext.Panel, {
	border : false,
	layout : 'border',
	controls : {
		text : '文本框',
		number : '数字框',
		combo : '下拉框',
		combotree : '下拉树',
		date : '日期控件',
		datetime : '日期时间控件',
		radiogroup : '单选按钮组合'
	},
	controlsList : [{
				name : '文本框',
				type : 'text',
				ctrl : '{\n"type":"text"\n}'
			}, {
				name : '数字框',
				type : 'number',
				ctrl : '{\n"type":"number",\n"range":false\n}'
			}, {
				name : '下拉框',
				type : 'combo',
				ctrl : '{\n"type":"combo",\n"code":"code_xb",\n"displayField":"name",\n"valueField":"code",\n"editable":false,\n"multi":false,\n"data":[["1","男"],["2女","2女"]]\n}'
			}, {
				name : '下拉树',
				type : 'combotree',
				ctrl : '{\n"type":"combotree",\n"code":"ele_enterprise",\n"displayField":"en_name",\n"valueField":"en_code",\n"idField":"chr_id",\n"parentField":"parent_id",\n"leafField":"is_leaf",\n"multi":false,\n"selectMode":"leaf",\n"rootValue":"all"\n}'
			}, {
				name : '日期控件',
				type : 'date',
				ctrl : '{\n"type":"date",\n"format":"Y-m-d",\n"range":true\n}'
			}, {
				name : '日期时间控件',
				type : 'datetime',
				ctrl : '{\n"type":"datetime",\n"format":"Y-m-d H:i:s",\n"range":false\n}'
			}, {
				name : '单选按钮组合',
				type : 'radiogroup',
				ctrl : '{\n"type":"radiogroup",\n"displayField":"name",\n"valueField":"code",\n"columns":2,\n"data":[["1","男"],["2","女"]]\n}'
			}],
	initComponent : function() {
		this.initGrid();
		this.initBasicTab();
		this.initSqlTab();
		this.initColumnTab();
		this.initQueryColumnTab();
		this.tabPanel = new Ext.TabPanel({
					region : 'center',
					activeItem : 0,
					deferredRender : true,
					bodyStyle : 'border-right:0;border-bottom:0;',
					headerStyle : 'border-top:0;border-right:0;',
					footerStyle : 'border-bottom:0;border-right:0;',
					buttonAlign : 'center',
					items : [this.basicTab, this.columnTab, this.queryColumnTab],
					getButton : function(index) {
						return this.buttons[index];
					},
					buttons : [{
								text : '新增',
								iconCls : 'icon-add',
								scope : this,
								handler : this.save
							}, {
								text : '保存',
								iconCls : 'icon-save',
								disabled : true,
								scope : this,
								handler : this.update
							}, {
								text : '删除',
								iconCls : 'icon-delete',
								disabled : true,
								hidden : true,
								scope : this,
								handler : this.del
							}]
				});
		this.items = [this.grid, this.tabPanel];
		Config.superclass.initComponent.call(this);
	},
	initGrid : function() {
		this.grid = new Ext.grid.GridPanel({
			region : 'west',
			width : 280,
			split : true,
			loadMask : true,
			bodyStyle : 'border-left:0;border-bottom:0;border-top:0;',
			store : new Ext.data.JsonStore({
						fields : ['id', 'name', 'cols', 'autoload',
								'headergroup', 'script', 'exceltpl',
								'excelstart', 'hastotal', 'showcol',
								'haspaging', 'pagesize'],
						url : My.url('/system/common/queryBySql.do'),
						baseParams : {
							sql : "select * from t_report "
						},
						root : 'data',
						autoLoad : true
					}),
			viewConfig : {
				forceFit : true
			},
			sm : new Ext.grid.RowSelectionModel({
				listeners : {
					rowselect : function(t, i, r) {
						// 加载角色
						var rec = this.grid.getStore().getAt(i);
						this.basicTab.getForm().loadRecord(rec);
						this.columnTab.getStore().load({
							params : {
								sql : "select * from t_report_col where reportid='"
										+ rec.data.id + "' order by priority"
							}
						});
						this.queryColumnTab.getStore().load({
							params : {
								sql : "select * from t_report_query where reportid='"
										+ rec.data.id + "' order by priority"
							}
						});
						this.tabPanel.getButton(1).setDisabled(false);
						this.tabPanel.getButton(2).setDisabled(false);
					},
					scope : this
				}
			}),
			cm : new Ext.grid.ColumnModel({
						defaults : {
							width : 180
						},
						columns : [new Ext.grid.RowNumberer(), {
									dataIndex : 'name',
									header : '配置名称'
								}]
					}),
			listeners : {
				rowcontextmenu : function(g, i, e) {
					e.preventDefault();
					g.getSelectionModel().selectRow(i);
					var rec = g.getStore().getAt(i);
					var menu = new Ext.menu.Menu({
								items : [{
									text : '预览',
									handler : function() {
										window.open(My.url('/report/render/'
												+ rec.data.id + '.htm'));
									}
								}]
							});
					menu.showAt(e.getXY());
				}
			}
		});
	},
	save : function() {
		var me = this;
		var params = {};
		var uuid = new UUID();
		var reportid = uuid.createUUID().toLowerCase();
		var sql = "begin insert into T_REPORT(id,name,cols,autoload,headergroup,script,exceltpl,excelstart,hastotal,showcol,haspaging,pagesize) values('"
				+ reportid
				+ "',#{name},#{cols},#{autoload},#{headergroup},#{script},#{exceltpl},#{excelstart},#{hastotal},#{showcol},#{haspaging},#{pagesize});";// SQL语句拼接
		var columnRecs = this.columnTab.getStore().getRange();
		if (columnRecs.length == 0) {
			My.alert('表头配置不能为空！');
			return;
		}
		sql += "delete T_REPORT_COL where reportid='" + reportid + "';\n";
		Ext.each(columnRecs, function(rec, i) {
			params['renderer_' + i] = rec.data.renderer;
			sql += "insert into T_REPORT_COL(id,reportid,columnname,chinesename,width,isdata,isgroup,display,renderer,priority) values('"
					+ uuid.createUUID()
					+ "','"
					+ reportid
					+ "','"
					+ rec.data.columnname
					+ "','"
					+ rec.data.chinesename
					+ "',"
					+ rec.data.width
					+ ","
					+ (rec.data.isdata || 0)
					+ ","
					+ (rec.data.isgroup || 0)
					+ ","
					+ rec.data.display
					+ ",#{renderer_" + i + "}," + i + ");\n";
		});
		var queryRecs = this.queryColumnTab.getStore().getRange();
		sql += "delete T_REPORT_QUERY where reportid='" + reportid + "';\n";
		Ext.each(queryRecs, function(rec, i) {
			params['control_' + i] = rec.data.control;
			sql += "insert into T_REPORT_QUERY(id,reportid,columnname,chinesename,control,priority) values('"
					+ uuid.createUUID()
					+ "','"
					+ reportid
					+ "','"
					+ rec.data.columnname
					+ "','"
					+ rec.data.chinesename
					+ "',#{control_" + i + "}," + i + ");\n";
		});
		sql += "end;";
		My.submit(this.basicTab, {
					url : My.url('/system/common/exec.do'),
					params : Ext.apply(params, {
								sql : sql
							}),
					successCallback : function() {
						me.afterExec();
					}
				});
	},
	update : function() {
		var me = this;
		var uuid = new UUID();
		var sql = "begin update T_REPORT set name=#{name},cols=#{cols},autoload=#{autoload},headergroup=#{headergroup},script=#{script},exceltpl=#{exceltpl},excelstart=#{excelstart},hastotal=#{hastotal},showcol=#{showcol},haspaging=#{haspaging},pagesize=#{pagesize} where id=#{id};";// SQL语句拼接
		var columnRecs = this.columnTab.getStore().getRange();
		if (columnRecs.length == 0) {
			My.alert('表头配置不能为空！');
			return;
		}
		var params = {};
		sql += "delete T_REPORT_COL where reportid=#{id};\n";
		Ext.each(columnRecs, function(rec, i) {
			params['renderer_' + i] = rec.data.renderer;
			sql += "insert into T_REPORT_COL(id,reportid,columnname,chinesename,width,isdata,isgroup,display,renderer,priority) values('"
					+ uuid.createUUID()
					+ "',#{id},'"
					+ rec.data.columnname
					+ "','"
					+ rec.data.chinesename
					+ "',"
					+ rec.data.width
					+ ","
					+ (rec.data.isdata || 0)
					+ ","
					+ (rec.data.isgroup || 0)
					+ ","
					+ rec.data.display
					+ ",#{renderer_" + i + "}," + i + ");\n";
		});
		var queryRecs = this.queryColumnTab.getStore().getRange();
		sql += "delete T_REPORT_QUERY where reportid=#{id};\n";
		Ext.each(queryRecs, function(rec, i) {
			params['control_' + i] = rec.data.control;
			sql += "insert into T_REPORT_QUERY(id,reportid,columnname,chinesename,control,priority) values('"
					+ uuid.createUUID()
					+ "',#{id},'"
					+ rec.data.columnname
					+ "','"
					+ rec.data.chinesename
					+ "',#{control_"
					+ i
					+ "},"
					+ i + ");\n";
		});
		sql += "end;";
		My.submit(this.basicTab, {
					url : My.url('/system/common/exec.do'),
					params : Ext.apply(params, {
								sql : sql
							}),
					successCallback : function() {
						me.grid.getStore().reload();
					}
				});
	},
	del : function() {
		var me = this;
		var sql = "begin delete T_REPORT where id=#{id};";// SQL语句拼接
		sql += "delete T_REPORT_COL where reportid=#{id};\n";
		sql += "delete T_REPORT_QUERY where reportid=#{id};\n";
		sql += "end;";
		var reportid = this.basicTab.getForm().findField('id').getValue();
		My.confirm('确定要删除该配置项吗？', function(btn) {
					if (btn == 'no') {
						return;
					}
					My.request({
								url : My.url('/system/common/exec.do'),
								params : {
									sql : sql,
									id : reportid
								},
								successCallback : function() {
									me.afterExec();
								}
							});
				});
	},
	afterExec : function() {
		this.grid.getStore().reload();
		this.tabPanel.getButton(1).setDisabled(true);
		this.tabPanel.getButton(2).setDisabled(true);
		this.basicTab.getForm().reset();
		this.columnTab.getStore().removeAll();
		this.queryColumnTab.getStore().removeAll();
	},
	initBasicTab : function() {
		var me = this;
		this.basicTab = new Ext.FormPanel({
			title : '基本信息',
			autoScroll : true,
			padding : 5,
			defaults : {
				xtype : 'fieldset',
				layout : 'form',
				labelWidth : 70,
				labelAlign : 'right',
				defaults : {
					xtype : 'textfield',
					anchor : '100%'
				}
			},
			items : [{
				title : '基础信息',
				items : [{
							fieldLabel : '配置编号',
							name : 'id',
							readOnly : true
						}, {
							fieldLabel : '配置名称',
							name : 'name',
							allowBlank : false
						}, {
							xtype : 'spinnerfield',
							fieldLabel : '查询列数',
							name : 'cols',
							value : 2,
							minValue : 1,
							maxValue : 5,
							allowBlank : false
						}, {
							xtype : 'radiogroup',
							fieldLabel : '自动加载',
							name : 'autoload',
							items : [{
										name : 'autoload',
										boxLabel : '是',
										inputValue : '1',
										checked : true
									}, {
										name : 'autoload',
										boxLabel : '否',
										inputValue : '0'
									}],
							allowBlank : false
						}, {
							xtype : 'radiogroup',
							fieldLabel : '是否合计',
							name : 'hastotal',
							items : [{
										name : 'hastotal',
										boxLabel : '是',
										inputValue : '1',
										checked : true
									}, {
										name : 'hastotal',
										boxLabel : '否',
										inputValue : '0'
									}],
							allowBlank : false
						}, {
							fieldLabel : '合计显示',
							name : 'showcol',
							value : ''
						}, {
							xtype : 'radiogroup',
							fieldLabel : '是否分页',
							name : 'haspaging',
							items : [{
										name : 'haspaging',
										boxLabel : '是',
										inputValue : '1'
									}, {
										name : 'haspaging',
										boxLabel : '否',
										inputValue : '0',
										checked : true
									}],
							allowBlank : false
						}, {
							xtype : 'combo',
							name : 'pagesize',
							hiddenName : 'pagesize',
							fieldLabel : '每页数量',
							triggerAction : 'all',
							mode : 'local',
							store : [[50, '50'], [100, '100'], [200, '200'],
									[500, '500'], [999999999, '全部']],
							value : 50,
							allowBlank : false
						}]
			}, {
				title : '导出EXCEL配置',
				items : [{
					xtype : 'combo',
					fieldLabel : '表格模板',
					name : 'exceltpl',
					hiddenName : 'exceltpl',
					// allowBlank : false,
					editable : false,
					typeAhead : true,
					triggerAction : 'all',
					store : new Ext.data.JsonStore({
								fields : ['tplid', 'tplname'],
								url : My.url('/system/common/queryBySql.do'),
								baseParams : {
									sql : "select tplid,tplname from t_report_tpl"
								},
								root : 'data',
								autoLoad : true
							}),
					displayField : 'tplname',
					valueField : 'tplid'
				}, {
					xtype : 'spinnerfield',
					fieldLabel : '数&ensp;据&ensp;行',
					name : 'excelstart',
					allowBlank : false,
					value : 2
				}]
			}, {
				title : '分组配置',
				layout : 'fit',
				items : [{
							xtype : 'compositefield',
							fieldLabel : '分组配置',
							items : [{
										xtype : 'textarea',
										name : 'headergroup',
										height : 100,
										flex : 1
									}, {
										xtype : 'button',
										text : '设置',
										width : 38,
										height : 100,
										handler : function() {
											me.setGroupConfig();
										}
									}]
						}]
			}, {
				title : 'SQL脚本配置',
				layout : 'fit',
				items : [{
							xtype : 'textarea',
							fieldLabel : 'SQL脚本',
							name : 'script',
							height : 500,
							allowBlank : false
						}]
			}]
		});
	},
	initSqlTab : function() {
		this.sqlTab = new Ext.Panel({
					title : '报表脚本',
					layout : 'fit',
					padding : 1,
					items : [{
								xtype : 'textarea',
								name : 'sql'
							}]
				});
	},
	initColumnTab : function() {
		var ms = new Ext.grid.CheckboxSelectionModel();
		this.columnTab = new Ext.grid.EditorGridPanel({
			title : '表头配置',
			enableDragDrop : true,
			ddGroup : 'columnDD',
			store : new Ext.data.JsonStore({
						fields : ['id', 'reportid', 'columnname',
								'chinesename', 'width', 'display', 'isdata',
								'isgroup', 'renderer', 'priority'],
						url : My.url('/system/common/queryBySql.do'),
						baseParams : {
							sql : "select * from t_report_col"
						},
						root : 'data'
					}),
			sm : ms,
			cm : new Ext.grid.ColumnModel({
						defaults : {
							width : 180
						},
						columns : [new Ext.grid.RowNumberer(), ms, {
									dataIndex : 'columnname',
									header : '字段名',
									editor : {
										xtype : 'textfield'
									}
								}, {
									dataIndex : 'chinesename',
									header : '显示名',
									editor : {
										xtype : 'textfield'
									}
								}, {
									dataIndex : 'width',
									header : '宽度',
									editor : {
										xtype : 'numberfield',
										value : 120
									},
									width : 80
								}, {
									xtype : 'checkcolumn',
									dataIndex : 'isdata',
									align : 'center',
									header : '数据列',
									width : 80
								}, {
									xtype : 'checkcolumn',
									dataIndex : 'display',
									align : 'center',
									header : '显示列',
									width : 80
								}, {
									xtype : 'checkcolumn',
									dataIndex : 'isgroup',
									align : 'center',
									header : '小计分组列',
									width : 80
								}, {
									dataIndex : 'renderer',
									header : '显示控制',
									width : 200
								}]
					}),
			tbar : [{
						text : '新增',
						iconCls : 'icon-add',
						scope : this,
						handler : function() {
							var rec = new Ext.data.Record({
										columnname : '',
										chinesename : '',
										width : 120,
										display : 1,
										isdata : 1,
										isgroup : 0,
										renderer : ''
									});
							this.columnTab.getStore().add(rec);
							this.columnTab.getSelectionModel().selectLastRow();
							this.columnTab.getView().refresh();
						}
					}, {
						text : '移除',
						iconCls : 'icon-delete',
						scope : this,
						handler : function() {
							var store = this.columnTab.getStore();
							var sm = this.columnTab.getSelectionModel();
							var recs = sm.getSelections();
							Ext.each(recs, function(rec) {
										store.remove(rec);
									});
							sm.selectLastRow();
							this.columnTab.getView().refresh();
						}
					}, '-', {
						text : '从SQL获取字段',
						iconCls : 'icon-sync',
						scope : this,
						handler : function() {
							var store = this.columnTab.getStore();
							var view = this.columnTab.getView();
							var sql = this.basicTab.getForm()
									.findField('script').getValue();
							My.request({
								url : My.url('/report/getQueryColName.do'),
								params : {
									sql : sql
								},
								success : function(response, r) {
									var obj = Ext.decode(response.responseText);
									var recs = store.getRange();
									for (var i = 0; i < obj.data.length; i++) {
										var has = false;
										for (var j = 0; j < recs.length; j++) {
											if (obj.data[i].columnname == recs[j].data.columnname) {
												has = true;
												break;
											}
										}
										if (!has) {
											var rec = new Ext.data.Record(obj.data[i]);
											store.add(rec);
										}
									}
									view.refresh();
								}
							});
						}
					}],
			listeners : {
				render : function(g) {
					this.createDD(g);
				},
				cellclick : function(g, ri, ci, e) {
					var rec = g.getStore().getAt(ri);
					var cm = g.getColumnModel();
					var field = cm.getDataIndex(ci);
					if (field == 'display' || field == 'isdata'
							|| field == 'isgroup') {
						var v = rec.data[field];
						rec.set(field, Number(v) == 1 ? 0 : 1);
					}
				},
				celldblclick : function(g, ri, ci, e) {
					var rec = g.getStore().getAt(ri);
					var cm = g.getColumnModel();
					var field = cm.getDataIndex(ci);
					if (field == 'renderer') {
						this.showRenderer(rec);
					}
				},
				scope : this
			}
		});
	},
	initQueryColumnTab : function() {
		var me = this;
		var sm = new Ext.grid.RowSelectionModel();
		this.queryColumnTab = new Ext.grid.EditorGridPanel({
					title : '查询配置',
					enableDragDrop : true,
					ddGroup : 'queryDD',
					store : new Ext.data.JsonStore({
								fields : ['id', 'reportid', 'columnname',
										'chinesename', 'control', 'priority'],
								url : My.url('/system/common/queryBySql.do'),
								baseParams : {
									sql : "select * from t_report_col"
								},
								root : 'data'
							}),
					sm : sm,
					cm : new Ext.grid.ColumnModel({
								defaults : {
									width : 180
								},
								columns : [new Ext.grid.RowNumberer(), {
											dataIndex : 'columnname',
											header : '字段名',
											editor : {
												xtype : 'textfield'
											}
										}, {
											dataIndex : 'chinesename',
											header : '中文名',
											editor : {
												xtype : 'textfield'
											}
										}, {
											dataIndex : 'control',
											header : '查询控件',
											renderer : function(v) {
												var ctrl = Ext.decode(v);
												if (ctrl && ctrl.type) {
													return me.controls[ctrl.type];
												}
												return v;
											}
										}]
							}),
					tbar : [{
						text : '新增',
						iconCls : 'icon-add',
						scope : this,
						handler : function() {
							var rec = new Ext.data.Record({
										columnname : '',
										chinesename : '',
										control : '{\n"type":"text"\n}'
									});
							this.queryColumnTab.getStore().add(rec);
							this.queryColumnTab.getSelectionModel()
									.selectLastRow();
							this.queryColumnTab.getView().refresh();
						}
					}, {
						text : '移除',
						iconCls : 'icon-delete',
						scope : this,
						handler : function() {
							var store = this.queryColumnTab.getStore();
							var sm = this.queryColumnTab.getSelectionModel();
							var recs = sm.getSelections();
							Ext.each(recs, function(rec) {
										store.remove(rec);
									});
							sm.selectLastRow();
							this.queryColumnTab.getView().refresh();
						}
					}],
					listeners : {
						render : function(g) {
							this.createDD(g);
						},
						celldblclick : function(g, ri, ci, e) {
							var rec = g.getStore().getAt(ri);
							var cm = g.getColumnModel();
							var field = cm.getDataIndex(ci);
							if (field == 'control') {
								this.showCtrlPnl(rec);
							}
						},
						scope : this
					}
				});
	},
	createDD : function(grid, callback) {
		new Ext.dd.DropTarget(grid.getView().mainBody, {
					ddGroup : grid.ddGroup,
					copy : false,
					notifyDrop : function(dd, e, data) {
						var ds = grid.getStore();
						var sm = grid.getSelectionModel();
						var rows = sm.getSelections();
						var cindex = dd.getDragData(e).rowIndex;
						if (cindex == undefined || cindex < 0) {
							e.cancel = true;
							return;
						}
						var indexs = [];
						for (var i = 0; i < rows.length; i++) {
							var rowData = ds.getById(rows[i].id);
							if (!this.copy) {
								ds.remove(ds.getById(rows[i].id)); // remove
								ds.insert(cindex, rowData); // insert
							}
							indexs.push(cindex + i);
						}
						sm.selectRows(indexs);
						grid.getView().refresh();// 刷新序号
						if (callback && Ext.isFunction(callback)) {
							callback();
						}
					}
				});
	},
	showCtrlPnl : function(rec) {
		if (this.ctrlWin) {
			this.ctrlWin.close();
		}
		this.ctrlPnl = new Ext.FormPanel({
					padding : 5,
					border : false,
					labelWidth : 60,
					defaults : {
						anchor : '100%'
					},
					items : [{
								xtype : 'combo',
								fieldLabel : '控件类型',
								triggerAction : 'all',
								mode : 'local',
								editable : false,
								hiddenName : 'ctrl',
								store : new Ext.data.JsonStore({
											fields : ['type', 'name', 'ctrl'],
											data : this.controlsList
										}),
								displayField : 'name',
								valueField : 'type',
								value : Ext.decode(rec.data.control || '{}').type,
								listeners : {
									select : function(t, r) {
										var area = this.ctrlPnl.items.itemAt(1);
										area.setValue(r.data.ctrl);
									},
									scope : this
								}
							}, {
								xtype : 'textarea',
								fieldLabel : '控件字符',
								height : 150,
								value : rec.data.control
							}]
				});
		this.ctrlWin = new Ext.Window({
					title : '控件配置',
					width : 420,
					autoHeight : true,
					modal : true,
					items : [this.ctrlPnl],
					buttons : [{
								text : '保存',
								iconCls : 'icon-save',
								scope : this,
								handler : function() {
									var area = this.ctrlPnl.items.itemAt(1);
									rec.set('control', area.getValue());
									this.ctrlWin.close();
								}
							}, {
								text : '取消',
								scope : this,
								iconCls : 'icon-cancel',
								handler : function() {
									this.ctrlWin.close();
								}
							}]
				});
		this.ctrlWin.show();
	},
	showRenderer : function(rec) {
		var me = this;
		if (this.renWin) {
			this.renWin.close();
		}
		var textarea = new Ext.form.TextArea({
					value : rec.data.renderer
				});
		var number = new Ext.form.SpinnerField({
					width : 60,
					value : 30,
					minValue : 1
				});
		this.renWin = new Ext.Window({
			title : '控制配置',
			width : 420,
			height : 260,
			modal : true,
			layout : 'fit',
			padding : 1,
			items : [textarea],
			tbar : ['请选择：', {
				xtype : 'combo',
				width : 100,
				triggerAction : 'all',
				mode : 'local',
				twinTrigger : false,
				editable : false,
				store : [
						["m.attr=\"style='text-align:left;'\";", '居左'],
						["m.attr=\"style='text-align:right;'\";", '居右'],
						[
								"v = Ext.util.Format.number(v, '0,0.00');\nm.attr=\"style='text-align:right;'\";",
								'金额']],
				listeners : {
					select : function(t, rec) {
						var v = textarea.getValue();
						if (v && v.length > 0) {
							v += '\n';
						}
						textarea.setValue(v + rec.data.field1);
					}
				}
			}, '复制到：', number, '行 ', {
				text : '复制',
				iconCls : 'icon-accept',
				handler : function() {
					var store = me.columnTab.getStore();
					var start = store.indexOf(me.columnTab.getSelectionModel()
							.getSelected());
					Ext.each(store.getRange(), function(rec, i) {
								if (i >= start && i < number.getValue()) {
									rec.set('renderer', textarea.getValue());
								}
							});
					me.renWin.close();
				}
			}],
			buttons : [{
						text : '保存',
						iconCls : 'icon-save',
						scope : this,
						handler : function() {
							rec.set('renderer', textarea.getValue());
							this.renWin.close();
						}
					}, {
						text : '取消',
						scope : this,
						iconCls : 'icon-cancel',
						handler : function() {
							this.renWin.close();
						}
					}]
		});
		this.renWin.show();
	},
	setGroupConfig : function() {
		var headerGroup = this.basicTab.getForm().findField('headergroup');
		var groups = Ext.decode(headerGroup.getValue() || '[]');
		var defaultValue = [];
		for (var i = 0; i < groups.length; i++) {
			defaultValue.push({
						cols : Ext.encode(groups[i])
					});
		}
		var changeCache = function() {
			var arry = [];
			var prec = g1.getSelectionModel().getSelected();
			var range = g2.getStore().getRange();
			Ext.each(range, function(rec) {
						arry.push({
									header : rec.data.header || ' ',
									colspan : rec.data.colspan,
									align : rec.data.align
								});
					});
			prec.set('cols', Ext.encode(arry));
		};
		var g1 = new Ext.grid.GridPanel({
					border : false,
					enableDragDrop : true,
					region : 'west',
					ddGroup : 'rowGroupDD',
					width : 120,
					tbar : [{
								text : '新增',
								iconCls : 'icon-add',
								handler : function() {
									var rec = new Ext.data.Record({
												name : Math.random(),
												cols : '[]'
											});
									g1.getStore().add(rec);
									g1.getSelectionModel().selectLastRow();
									g1.getView().refresh();
								}
							}, {
								text : '移除',
								iconCls : 'icon-delete',
								handler : function() {
									var store = g1.getStore();
									var sm = g1.getSelectionModel();
									var recs = sm.getSelections();
									Ext.each(recs, function(rec) {
												store.remove(rec);
											});
									sm.selectLastRow();
									g1.getView().refresh();
								}
							}],
					store : new Ext.data.JsonStore({
								fields : ['name', 'cols'],
								data : defaultValue
							}),
					sm : new Ext.grid.RowSelectionModel({
								listeners : {
									rowselect : function(g, i, r) {
										g1.fireEvent('rowclick', g1, i);
									}
								}
							}),
					cm : new Ext.grid.ColumnModel({
								columns : [{
											dataIndex : 'name',
											header : '分组行',
											renderer : function(v, m, r, i) {
												return '行' + (i + 1);
											}
										}]
							}),
					listeners : {
						render : function(g) {
							this.createDD(g);
						},
						afterrender : function(g) {
							setTimeout(function() {
										g.getSelectionModel().selectFirstRow();
									}, 50);
						},
						rowclick : function(g, i, e) {
							var rec = g.getStore().getAt(i);
							var cols = Ext.decode(rec.data.cols || '[]');
							g2.getStore().loadData(cols);
						},
						scope : this
					}
				});
		var g2 = new Ext.grid.EditorGridPanel({
			region : 'center',
			enableDragDrop : true,
			ddGroup : 'colGroupDD',
			bodyStyle : 'border-bottom:0;border-right:0;',
			sm : new Ext.grid.RowSelectionModel(),
			tbar : new Ext.Toolbar({
				style : 'border-top:0;border-right:0;',
				items : [{
							text : '新增',
							iconCls : 'icon-add',
							handler : function() {
								var prec = g1.getSelectionModel().getSelected();
								if (!prec) {
									My.alert('请选择行组');
									return;
								}
								var rec = new Ext.data.Record({
											title : '',
											colspan : 2,
											align : 'center',
											pid : prec.data.name
										});
								g2.getStore().add(rec);
								g2.getSelectionModel().selectLastRow();
								g2.getView().refresh();
								// 改变
								changeCache();
							}
						}, {
							text : '移除',
							iconCls : 'icon-delete',
							handler : function() {
								var store = g2.getStore();
								var sm = g2.getSelectionModel();
								var recs = sm.getSelections();
								Ext.each(recs, function(rec) {
											store.remove(rec);
										});
								sm.selectLastRow();
								g2.getView().refresh();
								// 改变
								changeCache();
							}
						}]
			}),
			store : new Ext.data.JsonStore({
						fields : ['header', 'colspan', 'align'],
						data : []
					}),
			cm : new Ext.grid.ColumnModel({
				columns : [{
							dataIndex : 'header',
							header : '标题',
							width : 180,
							editor : {
								xtype : 'textfield'
							}
						}, {
							dataIndex : 'colspan',
							header : '夸列',
							align : 'center',
							width : 60,
							editor : {
								xtype : 'spinnerfield',
								minValue : 1,
								onBlur : function() {
									this.beforeBlur();
									if (this.focusClass) {
										this.el.removeClass(this.focusClass);
									}
									this.hasFocus = false;
									if (this.validationEvent !== false
											&& (this.validateOnBlur || this.validationEvent == 'blur')) {
										this.validate();
									}
									var v = this.getValue();
									if (String(v) !== String(this.startValue)) {
										this.fireEvent('change', this, v,
												this.startValue);
									}
									this.fireEvent('blur', this);
									this.postBlur();
								}
							}
						}, {
							dataIndex : 'align',
							header : '位置',
							align : 'center',
							width : 80,
							editor : {
								xtype : 'combo',
								triggerAction : 'all',
								mode : 'local',
								editable : false,
								twinTrigger : false,
								store : [['left', 'left'],
										['center', 'center'],
										['right', 'right']]
							}
						}]
			}),
			listeners : {
				render : function(g) {
					this.createDD(g, changeCache);
				},
				afteredit : function(e) {
					changeCache();
				},
				scope : this
			}
		});
		var win = new Ext.Window({
					title : '分组设置',
					width : 520,
					height : 320,
					modal : true,
					layout : 'border',
					items : [g1, g2],
					buttons : [{
								text : '确定',
								iconCls : 'icon-accept',
								handler : function() {
									var recs = g1.getStore().getRange();
									var groups = [];
									Ext.each(recs, function(rec) {
												var cols = Ext
														.decode(rec.data.cols);
												if (cols.length > 0) {
													groups.push(cols);
												}
											});
									if (groups.length > 0) {
										var v = Ext.encode(groups);
										headerGroup.setValue(v);
									}
									win.close();
								}
							}, {
								text : '取消',
								iconCls : 'icon-cancel',
								handler : function() {
									win.close();
								}
							}]
				});
		win.show();
	}
});

Ext.onReady(function() {
			new Ext.Viewport({
						layout : 'fit',
						items : [new Config()]
					});
		});